<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>歌单详情-CC音乐</title>
<script src="js/jquery.min.js"></script>
<jsp:include page="headLink.jsp"></jsp:include>
<style type="text/css">
.szh-padding-top {
	height: 80px;
}

.layui-upload {
	
}
</style>
</head>
<body>
	<jsp:include page="playit.jsp"></jsp:include>
	<!--整个页面-->
	<div class="lyear-layout-container">
		<!--导航栏-->
		<header class="lyear-layout-header">
			<!--保持居中的秘密不可更改！！！-->
			<div class="header-container">
				<div class="header-top">
					<a href="homePage.jsp" class="logo"></a>
					<nav class="header-nav">
						<ul>
							<li><a href="homePage.jsp" target="">音乐馆</a></li>
							<li><a href="personal.jsp" class="header-nav__cur">我的音乐</a></li>
						</ul>
					</nav>
					<div class="header-search">
						<input type="text" class="text" placeholder="搜索">
						<!--<div class="btn"><i class="icon-sprite"></i></div>-->
						<div class="result">
							<a href="#" class="result-item"> <span class="rank">1</span>
								<span class="title">默</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">2</span>
								<span class="title">侧田</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">3</span>
								<span class="title">让我留在你身边</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">4</span>
								<span class="title">皮皮虾我们走</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">5</span>
								<span class="title">欢乐好声音</span> <span class="num">3.4万</span>
							</a>
							<div class="history">
								<span>搜索历史</span> <i class="icon-sprite"></i>
							</div>
						</div>
					</div>

					<ul class="topbar-right login-mod">
						<li class="dropdown dropdown-profile"><a
							href="javascript:void(0)" data-toggle="dropdown"> <img
								class="img-avatar img-avatar-48 m-r-10"
								src="images/headPhoto1.jpg" alt="灰质"> <span>灰质<span
									class="caret"></span></span>
						</a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a href="userInfo.jsp"><i class="mdi mdi-account"></i>
										个人信息</a></li>
								<li><a href="lyear_pages_edit_pwd.html"><i
										class="mdi mdi-lock-outline"></i> 修改密码</a></li>
								<li class="divider"></li>
								<li><a href="lyear_pages_login.html"><i
										class="mdi mdi-logout-variant"></i> 退出登录</a></li>
							</ul></li>
					</ul>
				</div>
			</div>
		</header>
		<!--页面主要内容-->
		<div class="container-fluid">

			<div class="row szh-padding-top"></div>
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<div class="col-md-3">
						<div class="card-body">
							<div class="layui-upload position-fixed">
								<div class="layui-upload-list"
									style="width: 220px; height: 220px;">
									<img class="layui-upload-img" src="images/list_cover.jpg"
										id="demo1">
									<!-- <p id="demoText"></p> -->
								</div>
								<!-- <button type="button" class="layui-btn" id="test1">上传图片</button> -->
								<h4>歌单介绍</h4>
								<p>内容...无</p>
							</div>
						</div>
					</div>
					<div class="col-md-9" style="margin-left: 260px">
						<!--<div class="card"> -->
						<div class="card-header">
							<h1>世间所有的相遇」都是久别的重逢</h1>
						</div>
						<div class="card-body">
							<div class="songlist_toolbar" style="margin-bottom: 20px;">
								<button
									class="btn btn-success btn-lg btn-round btn-label btn-w-xl all_play">
									<label><i class="mdi mdi-play-circle-outline"></i></label>播放全部
								</button>
							</div>
							<table class="table table-hover" id="list-collection">
								<thead>
									<tr>
										<th>#</th>
										<th>歌曲</th>
										<th></th>
										<th>歌手</th>
										<th>艺术派别</th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
				<div class="col-md-2"></div>
				<div class="row"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript"
		src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<!--<script type="text/javascript" src="js/main.min.js"></script> -->
	<script src="js/script.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<script src="js/homePage.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			var t1 = $('#list-collection')
					.DataTable(
							{
								"paging" : true,
								"ordering" : false,
								ajax : {
									"url" : "../ums.do",
									"data" : {
										"op" : "getlistdetails",
										"uid" : 1,
										"lid" : "${param.lid}"
									}
								},
								columns : [
										{
											data : null
										},
										{
											data : "mname"
										},
										{
											"defaultContent" : "<div class='szh_icons'><div><i class='mdi mdi-skip-next playit' id=''></i><i class='mdi mdi-heart-outline'></i><i class='mdi mdi-arrow-down'></i><i class='mdi mdi-delete'></i></div></div>"
										}, {
											data : "url"
										}, {
											data : "tname"
										} ]
							});
			t1.on('order.dt search.dt', function() {
				t1.column(0, {
					search : 'applied',
					order : 'applied'
				}).nodes().each(function(cell, i) {
					cell.innerHTML = i + 1;
				});
			}).draw();
			//为每一个tr添加事件即响应函数
			//$('#music-collection tbody tr');
			t1.on('mouseover', 'tr', function() {
				//console.log($(this).find("i").css("opacity",1));
				$(this).find("i").css("opacity", 1);
				var song_id = $(this).find('td').eq(3).text();
				$(this).find("i").eq(0).attr("id", song_id);
				//$($(t1.row(this)).find('i')).css("opacity", "1");
			});
			t1.on('mouseout', 'tr', function() {
				//console.log($(this).find("i").css("opacity",1));
				$(this).find("i").css("opacity", 0);

				//$($(t1.row(this)).find('i')).css("opacity", "1");
			});
		});
		// 			layui.use('upload',function() {
		// 				var $ = layui.jquery, upload = layui.upload;
		// 				//普通图片上传
		// 				var uploadInst = upload.render({
		// 					elem : '#test1',
		// 					url : '/upload/',
		// 					before : function(obj) {
		// 					//预读本地文件示例，不支持ie8
		// 						obj.preview(function(index,file, result) {
		// 							$('#demo1').attr('src',result); //图片链接（base64）
		// 						});
		// 					},
		// 					done : function(res) {
		// 						//如果上传失败
		// 						if (res.code > 0) {
		// 							return layer.msg('上传失败');
		// 						}
		// 						//上传成功
		// 					},
		// 					error : function() {
		// 						//演示失败状态，并实现重传
		// 						var demoText = $('#demoText');
		// 						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		// 						demoText.find('.demo-reload').on('click', function() {
		// 							uploadInst.upload();
		// 						});
		// 					}
		// 				});
		// 			});
	</script>
</body>
</html>